<template>
  <div class="modules">
    <div class="seach_box">
      <!-- 搜索模块 -->
      <el-form ref="form" :model="Form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="用户名:">
              <el-input v-model="Form.userName" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户账号:">
              <el-input v-model="Form.userAccount" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户邮箱:">
              <el-input v-model="Form.userEmail" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：">
              <el-select v-model="Form.status" placeholder="请选择">
                <el-option :value="1" label="全部"></el-option>
                <el-option :value="2" label="禁言"></el-option>
                <el-option :value="3" label="封号"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 第二行 -->
          <el-col :span="6">
            <el-form-item label="注册时间:">
              <el-date-picker v-model="Form.searchTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="search-wrapper">
      <div style="display: flex; justify-self: flex-end">
        <el-button size="small" type="primary">立即查询</el-button>
        <el-button size="small" type="primary">条件重置</el-button>
        <el-button size="small" type="info">新增用户</el-button>
        <el-button size="small" type="danger">批量删除</el-button>
      </div>
    </div>
  </div>

  <div class="modules">
    <el-card>
      <el-table @selection-change="handleSelectionChange" :data="tableData" style="width: 100%">
        <el-table-column prop="userAvatar" width="68" label="头像">
          <template #default="scope">
            <el-avatar :size="25" :src="scope.row.userAvatar" style="margin-top: 10px"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="名称"></el-table-column>
        <el-table-column prop="userAccount" width="128" label="账号"></el-table-column>
        <el-table-column prop="userEmail" width="168" label="邮箱"></el-table-column>
        <el-table-column prop="userRole" width="68" label="角色">
          <template #default="scope">
            <span>{{ scope.row.userRole === 1 ? "管理员" : "用户" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isLogin" width="108" label="封号">
          <template #default="scope">
            <i v-if="scope.row.isLogin" style="margin-right: 5px" class="el-icon-warning"></i>
            <i v-else style="margin-right: 5px; color: rgb(253, 199, 50)" class="el-icon-success"></i>
            <el-tooltip v-if="scope.row.isLogin" class="item" effect="dark" content="账号一经封号，不可登录系统。经由管理员解禁后，方可登录" placement="bottom-end">
              <span style="text-decoration: underline; text-decoration-style: dashed">已封号</span>
            </el-tooltip>
            <span v-else>正常</span>
          </template>
        </el-table-column>
        <el-table-column prop="isWord" width="108" label="禁言">
          <template #default="scope">
            <i v-if="scope.row.isWord" style="margin-right: 5px" class="el-icon-warning"></i>
            <i v-else style="margin-right: 5px; color: rgb(253, 199, 50)" class="el-icon-success"></i>
            <el-tooltip v-if="scope.row.isWord" class="item" effect="dark" content="账号一经禁言，不可评论互动。经由管理员解禁后，方可评论" placement="bottom-end">
              <span style="text-decoration: underline; text-decoration-style: dashed">已禁言</span>
            </el-tooltip>
            <span v-else>正常</span>
          </template>
        </el-table-column>
        <el-table-column :sortable="true" prop="createTime" width="168" label="注册于"></el-table-column>
        <el-table-column label="操作" width="170">
          <template #default="scope">
            <span class="text-button" @click="handleStatus(scope.row)">账号状态</span>
            <span class="text-button" @click="handleEdit(scope.row)">编辑</span>
            <span class="text-button" @click="handleDelete(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { useHttp } from "@/hooks/useHttp";
import request from "@/utils/request";
// 搜索
const Form = reactive({
  userName: "",
  userAccount: "",
  userEmail: "",
  searchTime: [],
  status: "",
  handleSizeChange: "",
  pageSize: "",
  currentPage: "",
});
// =======

const tableData = ref([]);
const currentPage = ref(1); // 假设初始页码为1
const pageSize = ref(10); // 假设每页显示10条数据
const totalItems = ref(0); // 总条目数

// 定义一个异步函数来获取数据
const fetchFreshData = async () => {
  try {
    tableData.value = []; // 清空表格数据
    let startTime = null;
    let endTime = null;

    if (Form.searchTime != null && Form.searchTime.length === 2) {
      // 注意：这里不需要使用 Promise.all，因为 toISOString 是同步的
      const startDateStr = searchTime.value[0].toISOString();
      const endDateStr = searchTime.value[1].toISOString();
      startTime = `${startDateStr.split("T")[0]}T00:00:00`;
      endTime = `${endDateStr.split("T")[0]}T23:59:59`;
      console.log(startTime, endTime, "startTime, endTime");
      
    }

    // 请求参数
    const params = {
      current: currentPage.value, // 当前页码
      size: pageSize.value, // 每页条数
      startTime: startTime, // 开始时间
      endTime: endTime, // 结束时间
      // ...其他查询条件（如果有的话）
    };


    // 使用 axios 发送 POST 请求（注意：这里假设你已经配置好了 axios 实例）
    const response = await request.post("/user/query", params);
    console.log(response, "response");
    
    const { data } = response;
    tableData.value = data.data;
    console.log(tableData.value,"tableData.value");
    
    totalItems.value = data.total;
  } catch (error) {
    console.error("查询用户信息异常:", error);
  }
};

// 可以在组件挂载时自动调用 fetchFreshData
onMounted(() => {
  fetchFreshData();
});

// const { dataList,loading,resetPagination,loadData,totals, pageInfo, handleSizeChange, handleCurrentChange }=useHttp("/user/query", form)
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}
</style>
